<template>
    <div>
        <h2>基本信息</h2>
        <el-form label-suffix="：" label-position="right" label-width="100px">
            <el-row>
                <el-col span="8" v-for="(item, key) in tabList" :key="key">
                    <el-form-item :label="item.label">{{ item.value }}</el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { queryStuInfo } from 'common/src/api/internationalExchanges/exchangeApproval'
export default {
    name: 'baseInfo',
    props: {
        studentId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            tabList: [
                {
                    label: '姓名',
                    key: 'studentName',
                    value: ''
                },
                {
                    label: '学号',
                    key: 'studentId',
                    value: ''
                },
                {
                    label: '学院',
                    key: 'facultyI18n',
                    value: ''
                },
                {
                    label: '专业',
                    key: 'professionI18n',
                    value: ''
                }
            ]
        }
    },
    watch: {
        studentId: function(val) {
            if (val) this.queryStudentInfo()
        }
    },
    methods: {
        async queryStudentInfo() {
            let { code, data } = await queryStuInfo({ studentId: this.studentId })
            if (code !== 200) return
            this.tabList.forEach(item => (item.value = data[item.key]))
        }
    }
}
</script>

<style lang="scss" scoped>
</style>